{% extends "page_base.html" %}

{% block content %}
<!-- CSS Files -->
<!-- <link type="text/css" href="/stylesheets/themes/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> -->
<link type="text/css" href="/stylesheets/pagination.css" rel="stylesheet" />
<link type="text/css" href="/stylesheets/msc_tag.css" rel="stylesheet" />

<!-- Raphael -->
<script language="javascript" type="text/javascript" src="/scripts/raphael.js"></script>  
<script language="javascript" type="text/javascript" src="/scripts/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/scripts/jquery.flot.stack.js"></script> 

<!-- Pagination-->
<script type="text/javascript" src="/scripts/ui/jquery.pagination.js"></script>

<!-- plotting -->
<script language="javascript" type="text/javascript" src="/scripts/msc_tag.js"></script>

<br style="clear: both"/>
<div id="cooccur_content" class="content_container">
	<div class="header">
		<h2>Co-occurrences</h2>
		<div class="separator"></div>
	</div>
	<div class="treemap_instructions">Click to see sub-topics, right click to go to the parent topic.</div>
	<div id="cooccur_graph_container" class="graph_container" >
		<div id="cooccur_treemap" class="jit treemap" style="width: 95%; height: 400px; "></div>
	</div>
	<div class="data_summary data_summary_table_container">
		<div id="cooccur_paging_container"></div>
		<br style="clear:both;" />
	</div>
</div>
<br style="clear: both"/>

<div id="year_content" class="content_container">
	<div class="header">
		<h2>Years</h2>
		<div class="separator"></div>
	</div>	
	<div id="year_graph_container" class="graph_container">
		<div id="year_plot" class="plot" style="width:100%; max-width: 600px; height:300px"></div>
	</div>
	<div id="year_data_summary" class="data_summary">
		<div class="data_summary data_summary_table_container">
			<div id="year_paging_container"></div>
			<br style="clear:both;" />
		</div>
	</div>
</div>

<br style="clear: both"/>

<div id="author_content" class="content_container">
	<div class="header">
		<h2>Authors</h2>
		<div class="separator"></div>
	</div>
	<div id="author_graph_container" class="graph_container">
		<div id="author_cloud" class="plot tag_cloud_container">
			<ul class="tag_cloud">
				{% for doc in author_cloud_data %}
					<li class="tag{{doc.size}}"><a href="#author_cloud" class="{% cycle 'even' 'odd' %}">{{ doc.name|safe }}</a></li>
				{% endfor %}
			</ul>
		</div>
	</div>
	<div id="author_data_summary">
		<div class="data_summary data_summary_table_container">
			<div id="author_paging_container"></div>
			<br style="clear:both;" />
		</div>
	</div>
</div>




<div id="data_container">
	<div id="cooccur_data" class="data_holder">{{ json_cooccur_data|escapejs }}</div>
	<div id="cooccur_tm_data" class="data_holder">{{ json_cooccur_tm_data|escapejs }}</div>
	<div id="year_data" class="data_holder">{{ json_year_data|escapejs }}</div>
	<div id="author_data" class="data_holder">{{ json_author_data|escapejs }}</div>
</div>



{% endblock %}
